<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />

<style>
    .login-container {
      height: 100vh;
      display: table;
      width: 100%;
    }
    .login-row {
      display: table-cell;
      vertical-align: middle;
    }
    .panel-login {
      max-width: 400px;
      margin: 0 auto;
    }
    .panel-login .panel-body {
      padding: 30px; /* 增加内边距 */
    }
    .panel-login .form-control,
    .panel-login .btn {
      height: 45px; /* 增加高度 */
      font-size: 16px; /* 增加字体大小 */
    }
  </style>
</head>

<body class="bg-light">
<div th:if="${error}" class="alert alert-danger alert-dismissible fade show text-center" role="alert">
  <strong>用户名或密码错误！</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

  <div class="container login-container">
    <div class="row login-row">
      <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default panel-login">
          <div class="panel-body">
            <h4 class="text-center mb-4">用户登录</h4>
            <form th:action="@{/user/login}" method="post">
              <div class="form-group">
                <label for="uid">用户名</label>
                <input type="text" class="form-control" id="uid" name="uid" required />
              </div>
              <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" required />
              </div>
              <button type="submit" class="btn btn-primary btn-block">登录</button>
            </form>
<!--            <div class="mt-3 text-center">-->
<!--              <small>还没有账号？<a href="/shopping/user/add" class="text-decoration-none">注册</a></small>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>

  <script th:inline="javascript">
    /*<![CDATA[*/
    document.addEventListener("DOMContentLoaded", function () {
      var error = /*[(${error} == true)]*/ false;
      if (error) {
        alert("用户名或密码错误！");
      }
    });
    /*]]>*/
  </script>

</body>

</html>